<template>
  <div class="container">
    <h2>停诊审批管理</h2>

    <!-- 待审批停诊申请 -->
    <div class="section">
      <h3>停诊申请</h3>
      <el-table :data="pendingApplications" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column label="医生姓名">
          <template v-slot="scope">
            {{ scope.row.scheduling?.doctor?.name || '未知医生' }}
          </template>
        </el-table-column>
        <el-table-column label="科室">
          <template v-slot="scope">
            {{ scope.row.scheduling?.clinic?.name || '未知科室' }}
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="停诊原因"></el-table-column>
        <el-table-column label="停诊日期">
          <template v-slot="scope">
            {{ formatDate(scope.row.time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" type="primary" @click="approveApplication(scope.row.id)">批准</el-button>
            <el-button size="small" type="danger" @click="rejectApplication(scope.row.id)">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 已审批记录 -->
    <div class="section">
      <h3>已审批记录</h3>
      <el-table :data="approvedRecords" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column label="医生姓名">
          <template v-slot="scope">
            {{ scope.row.scheduling?.doctor?.name || '未知医生' }}
          </template>
        </el-table-column>
        <el-table-column label="科室">
          <template v-slot="scope">
            {{ scope.row.scheduling?.clinic?.name || '未知科室' }}
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="停诊原因"></el-table-column>
        <el-table-column label="停诊日期">
          <template v-slot="scope">
            {{ formatDate(scope.row.time) }}
          </template>
        </el-table-column>
        <el-table-column label="审批结果">
          <template v-slot="scope">
            <el-tag :type="scope.row.isAgree === 1 ? 'success' : 'danger'">
              {{ scope.row.isAgree === 1 ? '已批准' : '已拒绝' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审批人">
          <template v-slot="scope">
            {{ scope.row.admin?.username || '系统' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const pendingApplications = ref([])
const approvedRecords = ref([])
const adminId = ref(1) // 实际项目中应从登录信息获取

onMounted(() => {
  fetchPendingApplications()
  fetchApprovedRecords()
})

const formatDate = (timestamp) => {
  if (!timestamp) return '未知时间'
  const date = new Date(timestamp)
  return date.toLocaleString()
}

// 获取待审批申请
const fetchPendingApplications = () => {
  axios.get('/closeApply/list').then(res => {
    if (res.data.code === 200) {
      pendingApplications.value = res.data.data
    }
  })
}

// 获取已审批记录
const fetchApprovedRecords = () => {
  axios.get('/close/list').then(res => {
    if (res.data.code === 200) {
      approvedRecords.value = res.data.data
    }
  })
}

// 批准申请
const approveApplication = (id) => {
  axios.post(`/closeApply/approve?id=${id}&adminId=${adminId.value}`)
      .then(res => {
        if (res.data.code === 200) {
          ElMessage.success('已批准该停诊申请')
          fetchPendingApplications()
          fetchApprovedRecords()
        }
      })
      .catch(err => {
        ElMessage.error('操作失败')
        console.error(err)
      })
}

// 拒绝申请
const rejectApplication = (id) => {
  axios.post("/closeApply/reject",
      {
        params:{
          id:id,
          adminId: adminId.value
        }
      }
  )
      .then(res => {
        if (res.data.code === 200) {
          ElMessage.success('已拒绝该停诊申请')
          fetchPendingApplications()
          fetchApprovedRecords()
        }
      })
      .catch(err => {
        ElMessage.error('操作失败')
        console.error(err)
      })
}
</script>

<style scoped>
/* 保持原有样式不变 */
.container {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.section {
  margin-bottom: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h3 {
  margin-bottom: 15px;
  color: #409EFF;
}
</style>